<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-row type="flex" justify="end" style="margin-bottom:20px">
        <el-button size="small" type="primary" @click="addLimits('1','0')">添加权限</el-button>
      </el-row>
      <el-card>
        <el-table border :data="limitsList" row-key="id" default-expand-all style="width: 100%">
          <el-table-column align="center" prop="title" label="权限名称" />
          <el-table-column align="center" prop="code" label="权限标识" />
          <el-table-column align="center" prop="description" label="权限描述" />
          <el-table-column align="center" label="操作">
            <template #default="{row}">
              <el-row type="flex" justify="end">
                <el-button v-if="row.type=='1'" size="small" type="primary" @click="addLimits('2',row.id)">添加子权限</el-button>
                <el-button size="small" @click="editLimits(row.id)">编辑</el-button>
                <el-button size="small" type="danger" @click="delLimits(row.id)">删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹窗 -->
        <el-dialog :title="limitsForm.id?'编辑权限':'新增权限'" :visible="isShowDialog" @close="btnCancel">
          <el-form ref="addLimits" :model="limitsForm" :rules="rules" label-width="100px">
            <el-form-item label="权限名称" prop="title">
              <el-input v-model="limitsForm.title" />
            </el-form-item>
            <el-form-item label="权限标识" prop="code">
              <el-input v-model="limitsForm.code" />
            </el-form-item>
            <el-form-item label="权限描述">
              <el-input v-model="limitsForm.description" />
            </el-form-item>
          </el-form>
          <template #footer>
            <el-button size="small" @click="btnCancel">取消</el-button>
            <el-button size="small" type="primary" @click="btnOk">确定</el-button>
          </template>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { listToTreeData } from '@/utils'
import { getLimitsList, addLimit, editLimit, getLimit, delLimit } from '@/api/limits'
export default {
  data() {
    return {
      limitsList: [],
      limitsParams: {
        _limit: 9999,
        _start: 0
      },
      isShowDialog: false,
      limitsForm: {
        id: '',
        title: '',
        code: '',
        description: '',
        pid: '0',
        type: '1'
      },
      rules: {
        title: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getLimitsList()
  },
  methods: {
    async getLimitsList() {
      this.limitsList = listToTreeData(await getLimitsList(this.limitsParams), '0')
      console.log(this.limitsList)
    },
    addLimits(type, pid) {
      this.limitsForm.type = type
      this.limitsForm.pid = pid.toString()
      this.isShowDialog = true
    },
    async editLimits(id) {
      this.limitsForm = await getLimit(id)
      this.isShowDialog = true
    },
    async delLimits(id) {
      try {
        await this.$confirm('此操作将永久删除该权限, 是否继续?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        })
        await delLimit(id)
        this.$message.success({
          message: '删除成功',
          center: true
        })
        this.getLimitsList()
      } catch (error) {
        return error
      }
    },
    async btnOk() {
      await this.$refs.addLimits.validate()
      if (this.limitsForm.id) {
        // 编辑
        await editLimit(this.limitsForm)
        this.$message.success({
          message: '编辑权限成功',
          center: true
        })
      } else {
        // 新增
        await addLimit(this.limitsForm)
        this.$message.success({
          message: '新增权限成功',
          center: true
        })
      }
      this.isShowDialog = false
      this.getLimitsList()
    },
    btnCancel() {
      this.limitsForm = {
        id: '',
        title: '',
        code: '',
        description: '',
        pid: '0',
        type: '1'
      }
      this.$refs.addLimits.resetFields()
      this.isShowDialog = false
    }
  }
}
</script>

<style>

</style>
